<template>
  <div class="container">
    <!-- 修改、添加表单 -->
    <el-form
      :model="formData"
      label-width="80px"
      :rules="formRules"
      ref="formData"
      class="operateForm"
      v-if="eventType === 'add' || eventType === 'update'"
    >
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item prop="sex" label="性别">
            <el-select v-model="formData.sex" placeholder="请选择">
              <el-option
                v-for="item in sexArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item prop="deptmentId" label="所属部门">
            <el-select v-model="formData.deptmentId" placeholder="请选择">
              <el-option
                v-for="item in depart"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item prop="position" label="岗位">
            <el-input
              v-model="formData.position"
              placeholder="请输入岗位"
              maxlength="32"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item prop="email" label="邮箱">
            <el-input
              v-model="formData.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item prop="idcard" label="身份证号">
            <el-input
              v-model="formData.idcard"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="alignCenter">
        <el-button
          class="commonBut saveBtn"
          type="primary"
          @click="saveEvent"
          v-show="isShowSave"
          :loading="isLoading"
          >保存</el-button
        >
        <el-button class="commonBut" @click="cancelEdit">取消</el-button>
      </el-row>
    </el-form>
    <!-- 详情 -->
    <el-row class="detailBox" v-else>
      <el-row>
        <!-- <el-col :span="8" :offset="3">
                <label>姓名：</label>
                <span>{{infoDetail.nickname || '--'}}</span>
            </el-col> -->
        <el-col :span="8" :offset="3">
          <label>性别：</label>
          <span>{{ infoDetail.sexDesc || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>所属部门：</label>
          <span>{{ infoDetail.deptmentName || '--' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>岗位：</label>
          <span>{{ infoDetail.position || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>邮箱：</label>
          <span>{{ infoDetail.email || '--' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="8" :offset="3">
                <label>手机号：</label>
                <span>{{infoDetail.tel || '--'}}</span>
            </el-col> -->
        <el-col :span="8" :offset="3">
          <label>身份证号：</label>
          <span>{{ infoDetail.idcard || '--' }}</span>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'userInfo',
  props: ['eventType', 'id'],
  data() {
    var enterpriseName = (rule, value, callback) => {
      if (value === null) {
        value = 0
      } else {
        value = value.replace(/\s+/g, '')
      }
      if (value !== '' || value != 0) {
        if (value.length < 2 || value.length > 20) {
          callback(new Error('请输入正确的姓名'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      titleText: '用户管理',
      infoDetail: {},
      formData: {
        nickname: '',
        sex: '',
        deptmentId: '',
        position: '',
        tel: '',
        email: '',
        idcard: '',
      },
      formRules: {
        nickname: [
          { required: true, validator: enterpriseName, trigger: 'blur' },
        ],
        deptmentId: [
          { required: true, message: '部门不能为空', trigger: 'change' },
        ],
        tel: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        email: [
          {
            pattern: /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/,
            message: '请输入正确的邮箱地址',
            trigger: 'blur',
          },
        ],
        idcard: [
          {
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
      },
      isLoading: false,
      type: 'detail',
      depart: [],
      sexArr: [
        { name: '男', code: '1' },
        { name: '女', code: '2' },
      ],
      isShowSave: '',
    }
  },
  created() {
    this.getInfoDetail()
    this.getUserdept()
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('user:update') > -1
  },
  methods: {
    //返回
    goBack() {},
    //编辑账号
    updateEvent() {
      this.type = 'update'
    },
    //保存事件
    saveEvent() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.isLoading = true
          this.submitInfoUptate()
        } else {
          return false
        }
      })
    },
    submitInfoUptate() {
      var data = {
        id: this.id, //----主键ID
        nickname: this.formData.nickname, //----用户姓名
        sex: this.formData.sex, //----性别
        deptmentId: this.formData.deptmentId, //----部门
        position: this.formData.position, //----岗位
        tel: this.formData.tel, //----手机号
        idcard: this.formData.idcard, //----身份证号
        email: this.formData.email, //----邮箱
      }

      this.axios({
        method: 'post',
        url: 'api-u/users/editinfo',
        data: data,
      })
        .then((response) => {
          this.isLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            setTimeout(() => {
              this.$emit('InfoChanged', 'detail')
              this.getInfoDetail()
              // this.$router.push({
              //     path:"/home/baseSettings/userManageList",
              //     name: "userManageList",
              // });
              // this.$store.commit("CHANGE_SLIDER_NAME", {oldUrl:"/home/baseSettings/userManageList",newUrl:this.$router.currentRoute.fullPath});
            }, 1500)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isLoading = false
        })
    },
    cancelEdit() {
      this.$emit('InfoChanged', 'detail')
    },
    //获取用户详情
    getInfoDetail() {
      this.axios({
        method: 'post',
        url: 'api-u/users/detail',
        data: {
          id: this.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.infoDetail = response.data.result
              this.formData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取部门
    getUserdept() {
      this.axios({
        method: 'post',
        url: 'api-m/dept/userdept',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.depart = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 197px;
    .operateForm {
      margin-top: 50px;
      .alignCenter {
        margin-top: 50px;
      }
      .el-select {
        width: 100%;
      }
    }
    .detailBox {
      margin-top: 50px;
      .el-row {
        margin-bottom: 22px;
        height: 40px;
        line-height: 40px;
        label {
          width: 80px;
          display: inline-block;
          text-align: right;
          font-size: 14px;
          color: #606266;
        }
      }
    }
    .operateBtn {
      width: auto;
      padding: 0 15px;
    }
  }
}
</style>
